<template>
  <div :style="'height:'+ height">
    <div v-loading="true" v-show="loading" class="result-wrapper" />
    <iframe v-show="!loading && src !== ''" :ref="refFrame" :id="iframeId" :src="src" frameborder="no" style="width:100%;height:100%" scrolling="auto" @load="iframeLoad"/>
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
      default: ''
    },
    iframeId: {
      type: String,
      default: '',
      required: false
    },
    refFrame: {
      type: String,
      default: 'refFrame',
      required: false
    }
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 + 'px;',
      loading: true
    }
  },
  mounted: function() {
    /* setTimeout(() => {
      this.loading = false
    }, 230) */
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 94.5 + 'px;'
    }
  },
  methods: {
    iframeLoad() {
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .result-wrapper {
    height: 200px;
    width: 100%;
    overflow: auto;
    padding: 2px;
    box-sizing: border-box;
  }
</style>
